<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>题型数据显示</h1>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="card">
        <!-- /.card-header -->
        <div class="card-body">
            <div id="jsGrid1" class="jsgrid" style="position: relative; height: 100%; width: 100%;">
                <div class="jsgrid-grid-header jsgrid-header-scrollbar">
                    <table class="jsgrid-table">
                        <tr class="jsgrid-header-row">
                            <th class="jsgrid-header-cell jsgrid-header-sortable text-center" style="width: 50%;">ID
                            </th>
                            <th class="jsgrid-header-cell jsgrid-header-sortable text-center" style="width: 50%;">题型
                            </th>
                        </tr>
                    </table>
                </div>
                <div class="jsgrid-grid-body" style="height: 950px;">
                    <table class="jsgrid-table">
                        <tbody id="typeTbody">
                        <tr class="jsgrid-row">
                            <td class="jsgrid-cell text-center" style="width: 50%;">Otto Clay</td>
                            <td class="jsgrid-cell jsgrid-align-right text-center" style="width: 50%;">61</td>
                        </tr>
                        <tr class="jsgrid-alt-row">
                            <td class="jsgrid-cell text-center" style="width: 150px;">Connor Johnston</td>
                            <td class="jsgrid-cell jsgrid-align-right text-center" style="width: 50px;">73</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
</section>
<!-- /.content -->


<script>
    $.ajax({
        // 异步请求的地址
        url: "/type/getAll.action",
        // 默认是get请求
        type: "get",
        // 后端返回数据的格式JSON
        dataType: "json",

        // 请求之前做的事情
        beforeSend: function (XMLHttpRequest) {
            console.log("请求之前做的事情.......");
        },

        // 请求成功做的事情
        success: function (data, textStatus) {
            console.log("请求成功做的事情........");

            // 删除标签中已有的数据
            $("#typeTbody").empty();

            $.each(data.data, function (i, n) {
                if (i % 2 === 0){
                    $("#typeTbody").append('<tr class="jsgrid-row">\n' +
                        '                            <td class="jsgrid-cell text-center" style="width: 50%;">' + n.id + '</td>\n' +
                        '                            <td class="jsgrid-cell jsgrid-align-right text-center" style="width: 50%;">' + n.name + '</td>\n' +
                        '                        </tr>');
                }else {
                    $("#typeTbody").append('<tr class="jsgrid-alt-row">\n' +
                        '                            <td class="jsgrid-cell text-center" style="width: 50%;">' + n.id + '</td>\n' +
                        '                            <td class="jsgrid-cell jsgrid-align-right text-center" style="width: 50%;">' + n.name + '</td>\n' +
                        '                        </tr>');
                }

            });

        },

        // 请求失败做的事情
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("请求失败做的事情.......");
        },

        // 请求完毕做的事情
        complete: function (XMLHttpRequest, textStatus) {
            console.log("请求完毕做的事情.......");
        }
    });
</script>
